<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>{:$page_info['title']}</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="yinqi">
<link href="__STATIC__/admin/css/bootstrap.min.css" rel="stylesheet">
<link href="__STATIC__/admin/css/materialdesignicons.min.css" rel="stylesheet">
<link href="__STATIC__/admin/css/style.min.css" rel="stylesheet">

<link href="__STATIC__/common/select2/select2.css" rel="stylesheet">
<link href="__STATIC__/admin/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">

<link href="__STATIC__/admin/css/cch.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="__STATIC__/common/recharge/css/amazeui.min.css" />
<link rel="stylesheet" type="text/css" href="__STATIC__/common/recharge/css/main.css" />
</head>
  
<body>
<div class="container-fluid p-t-15">
  
  <div class="row">
    <div class="col-lg-12">


            <div class="pay" style="margin-top: 30px;">
                <!--主内容开始编辑-->
                <div class="tr_recharge">
                    <div class="tr_rechtext">
                        <p class="te_retit"><img src="__STATIC__/common/recharge/images/coin.png" alt="" />充值中心</p>
                        <p>1.充值后，充值金额会直接体现在账户余额中，如果个人中心余额没有变更，请刷新下页面。</p>
                        <p>2.本页面只支持小额充值，如果是大金额充值请联系业务经理或财务。</p>
                    </div>
                    <form action="" method="POST" class="am-form" id="doc-vld-msg">
                        <div class="tr_rechbox">
                            <div class="tr_rechhead">
                                <img src="__STATIC__/common/recharge/images/ys_head2.jpg" />
                                <p>充值帐号：
                                    <a>{:$login_user['name']}（{:$login_user['pk']}）</a>
                                </p>
                                <div class="tr_rechheadcion">
                                    <img src="__STATIC__/common/recharge/images/coin.png" alt="" />
                                    <span>当前余额：<span>￥ {:$login_user['balance']}</span></span>
                                </div>
                            </div>
                            <div class="tr_rechli am-form-group">
                                <ul class="ui-choose am-form-group" id="uc_01">
                                    <?php foreach ($amounts as $k => $amount): ?>
                                        <li>
                                            <label class="am-radio-inline">
                                                <input type="radio" value="{:$amount}" {:$k==0?'checked':''} name="amount" data-validation-message="请选择一项充值额度"> {:$amount}￥
                                            </label>
                                        </li>
                                    <?php endforeach ?>
                                    <li>
                                        <label class="am-radio-inline">
                                            <input type="radio" name="amount" data-validation-message="请选择一项充值额度" value="-1"> 其他金额
                                        </label>
                                    </li>
                                </ul>
                                <!--<span>1招兵币=1元 10元起充</span>-->
                            </div>
                            <div class="tr_rechoth am-form-group">
                                <span>其他金额：</span>
                                <input type="number" min="10" max="2000元" name="othbox" value="" class="othbox" data-validation-message="充值金额范围：10-2000" />
                                <p>充值金额范围：10-2000元</p>
                            </div>
                            <!-- <div class="tr_rechcho am-form-group">
                                <span>充值方式：</span>
                                <label class="am-radio">
                                        <input type="radio" name="radio1" value="" data-am-ucheck required data-validation-message="请选择一种充值方式"><img src="__STATIC__/common/recharge/images/wechatpay.png"/>
                                    </label>
                                <label class="am-radio" style="margin-right:30px;">
                                        <input type="radio" name="radio1" value="" data-am-ucheck data-validation-message="请选择一种充值方式"><img src="__STATIC__/common/recharge/images/zfbpay.png"/>
                                    </label>
                            </div> -->
                            <div class="tr_rechnum">
                                <span>应付金额：</span>
                                <p class="rechnum">0.00元</p>
                            </div>
                        </div>
                        <div class="tr_paybox">
                            <input type="button" value="确认支付" class="tr_pay am-btn" />
                            <span>温馨提示：遇到问题请联系业务经理。</span>
                        </div>
                    </form>
                </div>
            </div>


      
    </div>
    
  </div>
  
</div>

<script type="text/javascript" src="__STATIC__/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/bootstrap.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/main.min.js"></script>

<!-- 时间选择器 -->
<script src="__STATIC__/admin/js/bootstrap-datetimepicker/moment.min.js"></script>
<script src="__STATIC__/admin/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="__STATIC__/admin/js/bootstrap-datetimepicker/locale/zh-cn.js"></script>

<script src="__STATIC__/common/select2/select2.min.js"></script><!-- 下拉搜索 -->

<script type="text/javascript" src="__STATIC__/admin/js/lyear-loading.js"></script><!-- loading -->
<script type="text/javascript" src="__STATIC__/admin/js/cch.js"></script>

<link rel="stylesheet" href="__STATIC__/admin/js/jconfirm/jquery-confirm.min.css">
<script src="__STATIC__/admin/js/jconfirm/jquery-confirm.min.js"></script>

<script type="text/javascript" src="__STATIC__/common/recharge/js/ui-choose.js"></script>
<script type="text/javascript" src="__STATIC__/common/cch-util.js"></script>
<script type="text/javascript">
    // 将所有.ui-choose实例化
    $('.ui-choose').ui_choose();

    $(function() {
        $(".ui-choose li").on('click',function(){
            var amount = $(this).find('input').val();
            if (amount == -1) {
                $('.tr_rechoth').show();
                $(".othbox").trigger("keyup");
            }else{
                $('.tr_rechoth').hide();
                $('.rechnum').text(amount+'元');
            }
        });
        $($(".ui-choose li")[0]).trigger("click");

        $(".othbox").on('keyup',function(){
            var other = $(".othbox").val();
            if (other == '') { other = 0; }
            $('.rechnum').text(other+'元');
        });

        $(".am-btn").on('click',function(){
            var param = $("#doc-vld-msg").serialize();
            $.ajax({
                url:'{:url("save")}',
                data:param,
                type:'post',
                dataType:'json',
                success:function(data){
                    if (data.code == 1) {
                        $.confirm({
                            title: '支付结果',
                            content: '充值订单是否支付成功',
                            type: 'blue',
                            typeAnimated: true,
                            buttons: {
                                tryAgain: {
                                    text: '成功',
                                    btnClass: 'btn-green',
                                    action: function(){
                                        window.location.href = '{:url('recharge/index')}';
                                    }
                                },
                                close: {
                                    text: '关闭'
                                }
                            }
                        });
                        window.open(data.url);
                    }else{
                        cchUtil.alert(data.msg,'danger');
                    }
                }
            });
        });
    })
</script>
</body>
</html>